<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据代理_事件_修饰符</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .maopao{
            border: 1px solid blue;
            height: 50px;
        }
        .box1{
            padding: 5px;
            background-color: turquoise;
        }
        .box2{
            padding: 5px;
            background-color: blue;
        }
        th,td{
            border: 1px solid black;
        }
    </style>
</head>
<body>


    <div id="root">
        <h2>数据代理_学校名称：[[name]]</h2>
        <h2>数据代理_学校地址：[[address]]</h2>
        <img src="./vue中的数据代理.png" alt="数据代理"/>

        <!-- <button v-on:click="showInfo">点我提示信息</button>   v-on:click可简写为 @click -->
        <button @click="showEvent($event,66)">事件学习</button>
        <br/>
        <br/>
        <a href="www.baidu.com" @click.prevent="qualifier">点击后链接跳转事件被阻止</a> <br/>  
        <!-- 冒泡阻止 -->
        <div class="maopao" @click="qualifier">
            <button @click.stop="qualifier">冒泡阻止</button>
        </div>
         <!-- 只触发一次 -->
            <button @click.once="qualifier">只触发一次</button>

         <!-- 捕获模式 -->
         <div class="box1" @click.capture="showMsg(1)">
             1
             <div class="box2" @click="showMsg(2)">
              2 
             </div>
         </div>
         
        <!-- 操作的元素才触发事件 -->
        <div class="maopao" @click.self="qualifier">
            <button @click="qualifier">操作的元素才触发事件</button>
        </div>

        <!-- 修饰符可以连续写，比如 -->
        <div class="maopao" @click="qualifier">
            <a href="www.baidu.com" @click.stop.prevent="qualifier">阻止冒泡且阻止默认事件，如跳转</a> <br/>  
        </div>


        <br/>常用的事件修饰符<br/>
        1.prevent:阻止默认事件(常用)<br/>
        2.stop:阻止事件冒泡(常用)<br/>
        3.once:只触发一次（常用）<br/>
        4.capture： 使用事件的捕获模式<br/>
        5.self 只有是event.target是当前操作的元素才触发事件<br/>
        6.passsive:事件的默认行为立即执行 ，无需等待事件回调完毕<br/>

        <input type="text" placeholder="按下回车提示输入" @keyup.delete="showInfo">
        <table>
            <th>vue中常用的别名</th>
            <th>Key值</th>
        <tr v-for="i in ob_key">
            <td>[[i.name]]</td>
            <td>[[i.key]]</td>
        <tr>
        </table>
    </div>
    <br/>
    
</body>
    <!-- 数据代理：通过一个对象代理对另一个对象中的操作（读写） -->
    <script type="text/javascript">
        //js实现数据代理
        // let obj1={x:10}
        // let obj2={y:100}
        // Object.defineProperty(obj2,'x',{
        //     get(){
        //         return obj1.x
        //     },
        //     set(value){
        //         obj1.x=value
        //     }
        // })

        Vue.config.productionTip= false
       // Vue.config.keyCode.huiche=13 //定义了一个别名按键
        const vm =  new Vue({
            el:'#root',
            delimiters:["[[","]]"],
            data:{
                name:'home',
                address:'成都',
                ob_key:[],
            },
            mounted:function(){
                this.fetchData();
            },
            methods:{
                showEvent(event,number)
                {
                    //拿到目标 event.target 拿到目标文字信息  event.target.innerText  
                    //console.log(event.target.innerText)   
                    //此处的this是vm
                    //console.log(this) 
                    //alert("你好，我的主人")
                    console.log(event)
                    console.log(number)
                },
                qualifier(e){  //qualifier修饰符       
                    // e.preventDefault()   阻止事件的调用  
                    //e.stopPropagetion()   阻止冒泡
                    // alert('链接并不会跳走')
                    alert("已点击")
                },
                showMsg(value){
                    console.log(value)
                },
                showInfo(e){
                 //console.log(e.target.value) 
                //    if(e.keyCode ==13){ 
                //        return console.log(e.keyCode)
                //    }
                    console.log(e.target.value)
                },fetchData(){
                    this.ob_key=[{name:'回车',key:'enter'},
                    {name:'删除',key:'delete'},
                    {name:'退出',key:'esc'},
                    {name:'空格',key:'space'},
                    {name:'换行(特殊必须配合)keydowm使用',key:'tab'},
                    {name:'上',key:'up'},
                    {name:'下',key:'down'},
                    {name:'左',key:'left'},
                    {name:'右',key:'right'}]
                }
            }
        })
    </script>

</html>